<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QQ聊天</title>
    <!-- 在网页的页签上加入一个小icon的图标 -->
    <link rel="shortcut icon" href="images/favicon.ico" type="images/x-icon">
    <!--引入chat.css-->
    <link rel="stylesheet" href="css/chat.css">
    <!--引入饿了么ui的css文件-->
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div id="app">
        <div id="main">
            <div id="left">
                <div id="records">
                    <div class="message_line" v-for="r in messageRecords">
                        <div v-if="r.isMe == 0" class="r">
                            <div class="r_left"><img :src="r.user.face" class="record_face"></div>
                            <div class="r_right">
                                <div class="nickname">{{r.user.account}}</div>
                                <div class="message_bg">{{r.message}}</div>
                            </div>
                        </div>
                        <div v-if="r.isMe == 1" class="rr">
                            <div class="message_bg_me">{{r.message}}</div>
                            <div><img :src="r.user.face" class="record_face"></div>
                        </div>
                    </div>
                </div>
                <div id="tools"></div>
                <div id="contents">
                    <textarea id="contents_text" v-model="message"></textarea>
                </div>
                <div id="buttons">
                    <el-button>关闭</el-button>
                    <el-button @click="sendMessage" type="primary">发送</el-button>
                </div>
            </div>
            <div id="right">
                <div class="online" v-for="f in friends">
                    <img class="face" :src="f.face">
                    <span class="text1">{{f.account.substring(0,12)}}</span>
                    <span class="jaiobian">{{f.account.substring(12)}}</span>
                </div>
            </div>
        </div>
    </div>
    <!-- 引入vue/ajax/饿了么ui框架-->
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/index.js"></script>
    <script>
        var app = new Vue({
            el: '#app',//vue框架作用于该app节点内
            data: {
                ws: null,
                message: null,
                friends: [],
                messageRecords: []
            },
            methods: {
                doOpen() {
                    this.$notify({
                        title: 'hh',
                        message: '右下角弹出的消息',
                        position: 'bottom-right',
                        type: 'info',
                    });
                },
                sendMessage() {
                    if (this.message.trim()) {
                        //发送给后端
                        this.ws.send(this.message);
                    }
                    this.message = '';//发送完清空输入框
                    //给予输入框光标
                    document.getElementById("contents_text").focus();
                },
                doMessage(res) {
                    var responseEbtity = JSON.parse(res.data);
                    //10代表好友列表
                    if (responseEbtity.code == 10) {
                        //更新好友列表
                        this.refreshOnlineUser(responseEbtity.data);
                    }
                    //20代表聊天消息
                    if (responseEbtity.code == 20) {
                        this.refreshMessage(responseEbtity.data, responseEbtity.message);
                    }
                },
                refreshOnlineUser(data) {
                    this.friends = data;
                },
                refreshMessage(user, message) {
                    var isMe = (user.account == sessionStorage.getItem('user') ? 1 : 0);
                    this.messageRecords.push({ 'user': user, 'message': message, 'isMe': isMe });
                    this.$nextTick(() => {
                        document.querySelector('#records').scrollTop =
                            document.querySelector('#records').scrollHeight;
                    });
                }
            },
            mounted() {
                var account = sessionStorage.getItem("user");
                //
                if (!account) {
                    this.$message({
                        showClose: true,
                        message: '您还没有登录，请先登录！',
                        type: 'error',
                        center: true,
                        showClose: true,
                        onClose: function () {
                            location = 'register.html';
                        }
                    });
                } else {
                    var url = "ws://121.4.12.168:8080/chat?account=" + account;
                    //创建与后端的连接
                    this.ws = new WebSocket(url);
                    //连接成功会执行doopen方法
                    this.ws.onopen = this.doOpen;
                    //收到后端消息时执行方法
                    this.ws.onmessage = this.doMessage;
                }
            }
        });
    </script>
</body>

</html>